import React, { useState, useEffect } from "react";
import { Table, Button, Modal } from "antd";
import axios from "axios";
import { DeleteOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
export default function NewsCategory() {
  const [dataSource, setdataSource] = useState([]);

  useEffect(() => {
    axios.get("/categories").then((res) => {
      setdataSource(res.data);
    });
  }, []);

  const columns = [
    {
      title: "ID",
      dataIndex: "id",
    },
    {
      title: "栏目名称",
      dataIndex: "title",
    },
    {
      title: "操作",
      render(item) {
        return (
          <div>
            <Button
              danger
              shape="circle"
              onClick={() => {
                confirmMethod(item);
              }}
              disabled={item.default}
              icon={<DeleteOutlined />}
            />
          </div>
        );
      },
    },
  ];

  const deteleMethod = (item) => {
    setdataSource(dataSource.filter((data) => data.id !== item.id));
  };
  const confirmMethod = (item) => {
    Modal.confirm({
      title: "你确定要删除吗？",
      icon: <ExclamationCircleOutlined />,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        deteleMethod(item);
      },
    });
  };

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      />
    </div>
  );
}
